<template>
  <div id="login" data-v-adminlogin>
    <div class="login_box">
      <div class="center">
        <div class="front-face">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="0"
            class="demo-ruleForm"
          >
            <h1>Login</h1>
            <el-form-item prop="username" class="txt">
              <el-input
                v-model="ruleForm.username"
                class="txt-input"
                :class="{ focus: isUsernameFocus }"
                @focus="addUsernameInputClass"
                @blur="removeUsernameInputClass"
              ></el-input>
              <span data-placeholder="Username"></span>
            </el-form-item>

            <el-form-item prop="password" class="txt">
              <el-input
                type="password"
                v-model="ruleForm.password"
                class="txt-input"
                :class="{ focus: isPassFocus }"
                @focus="addPassInputClass"
                @blur="removePassInputClass"
              ></el-input>
              <span data-placeholder="Password"></span>
            </el-form-item>
            <el-form-item style="margin: 40px 0">
              <el-button @click.prevent="submitForm()" class="logbtn"
                >Login</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="bg"></div>
  </div>
</template>

<script>
export default {
  name: "AdminLogin",
  data: function () {
    return {
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
      },

      isUsernameFocus: false,
      isPassFocus: false,
    };
  },

  methods: {
    // 提交登录表单
    submitForm() {
      if (this.ruleForm.username == "") {
        this.$notify.error({
          title: "错误",
          message: "用户名不能为空",
        });
        return;
      } else if (this.ruleForm.password == "") {
        this.$notify.error({
          title: "错误",
          message: "密码不能为空",
        });
        return;
      }

      this.axios
        .post("api/admin/login", {
          username: this.ruleForm.username,
          password: this.ruleForm.password,
        })
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response);
            window.localStorage.token = response.data.token;
            this.$router.push({ path: "/admin/demo/home" });
          } else if (response.data.status === 202) {
            this.$message({
              type: "error",
              message: response.data.msg,
            });
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    addUsernameInputClass() {
      this.isUsernameFocus = true;
    },

    removeUsernameInputClass() {
      if (this.ruleForm.username == "") this.isUsernameFocus = false;
    },

    addPassInputClass() {
      this.isPassFocus = true;
    },

    removePassInputClass() {
      if (this.ruleForm.password == "") this.isPassFocus = false;
    },
  },
};
</script>

<style>
@keyframes myfirst {
  0% {
    background: #6768ab;
  }
  25% {
    background: #708ec5;
  }
  50% {
    background: #77b2dd;
  }
  100% {
    background: #7bc1e8;
  }
}

@-moz-keyframes myfirst /* Firefox */ {
  0% {
    background: #6768ab;
  }
  25% {
    background: #708ec5;
  }
  50% {
    background: #77b2dd;
  }
  100% {
    background: #7bc1e8;
  }
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {
  0% {
    background: #6768ab;
  }
  25% {
    background: #708ec5;
  }
  50% {
    background: #77b2dd;
  }
  100% {
    background: #7bc1e8;
  }
}

@-o-keyframes myfirst /* Opera */ {
  0% {
    background: #6768ab;
  }
  25% {
    background: #708ec5;
  }
  50% {
    background: #77b2dd;
  }
  100% {
    background: #7bc1e8;
  }
}

#login[data-v-adminlogin] {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* background: linear-gradient(120deg, #82dffc, #6768ab); */
  overflow: hidden;
  animation: myfirst 3s;
  -moz-animation: myfirst 3s; /* Firefox */
  -webkit-animation: myfirst 3s; /* Safari and Chrome */
  -o-animation: myfirst 3s; /* Opera */
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; /*Safari and Chrome*/
  animation-direction: alternate;
  -webkit-animation-direction: alternate; /* Safari 和 Chrome */
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear; /* Safari and Chrome */
}

.bg {
  position: absolute;
  top: -351px;
  left: -453px;
  width: 2247px;
  height: 898px;
  background: #c6f4ff;
  transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);

  background: linear-gradient(-120deg, #82dffc, #6768ab);
}

.login_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 520px;
  height: 400px;
  font-size: 24px;
  border-radius: 10px;
  z-index: 1000;
}

.login_box .center {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #82dffc38;
  border-radius: 10px;
}

.center .front-face {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 10px;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Chrome 、Safari */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d; /* Safari and Chrome */

  transition: 2.3s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-transition: 2.3s cubic-bezier(0.4, 0.2, 0.2, 1); /* Safari */
}

.front-face {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg); /* Safari 与 Chrome */

  /* background-color: #fff; */
}

.demo-ruleForm {
  width: 80%;
  margin: 0 auto;
}

.center h1 {
  font-size: 30px;
  font-weight: 500;
  margin: 30px 0;
  color: #fff;
}

.txt {
  position: relative;
  margin: 30px 0;
  border-bottom: 2px solid #fff;
}

.txt .txt-input input {
  padding: 0 5px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  border: none;
  outline: none;
  background: none;
}

.txt span::before {
  position: absolute;
  top: 50%;
  left: 5px;
  content: attr(data-placeholder);
  color: #fff;
  transform: translateY(-50%);
  transition: 0.5s;
}

.txt span::after {
  position: absolute;
  top: 42px;
  left: 0;
  width: 0;
  height: 2px;
  content: "";
  color: #fff;
  transform: translateY(-50%);
  background: linear-gradient(120deg, #82dffc, #6768ab);
  transition: 0.5s;
}

.focus + span::before {
  top: 0;
}

.focus + span::after {
  width: 100%;
}

.logbtn {
  width: 100%;
  height: 50px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(120deg, #82dffc, #6768ab);
  border: none;
  outline: none;
}

.logbtn:hover {
  color: #fff;
}
</style>